<template>
  <div class="app-container">
    <div style="margin-bottom: 30px;padding-left: 30px">
      <el-button type="success" @click="submit">保存</el-button>
    </div>
    <el-form ref="form" :model="maintask" label-width="120px">
      <el-form-item label="任务名称">
        <el-input v-model="maintask.mainName" />
      </el-form-item>
      <el-form-item label="任务简介">
        <el-input v-model="maintask.mainTitle" type="textarea" />
      </el-form-item>

      <el-form-item label="任务描述">
        <el-input v-model="maintask.mainDetail" type="textarea" />
      </el-form-item>
      <el-form-item label="子任务顺序">
        <el-radio-group v-model="maintask.mainType">
          <el-radio-button label="0" value="0">顺序</el-radio-button>
          <el-radio-button label="1" value="1">随机</el-radio-button>
        </el-radio-group> </el-form-item>
      <el-form-item label="物品类型">
        <el-tabs v-model="maintask.mainModel" type="border-card">
          <el-tab-pane label="碎片">
            <el-form-item label="数量" label-width="50px">
              <el-input v-model="maintask.count" :maxlength="3" type="Number" />
            </el-form-item>
          </el-tab-pane>
          <el-tab-pane label="拼图">
            <!--            <img src="../../assets/img/pintu.png" alt="">-->
          </el-tab-pane>
        </el-tabs>
      </el-form-item>

      <el-form-item label="子任务">
        <div style="border: 1px solid #ccc;padding: 30px">

          <div style="margin-bottom: 30px;padding-left: 30px">
            <el-button type="primary" @click="addSubtask">新增</el-button>
          </div>
          <div class="block">
            <el-timeline>
              <el-timeline-item v-for="(item,index) in subtask" :key="index" :timestamp="'任务 '+(index+1)" placement="top">
                <el-card>
                  <el-form ref="ruleForm" label-width="" class="demo-ruleForm">
                    <el-form-item label="任务名称">
                      <el-input v-model="item.branchName" />
                    </el-form-item>
                    <el-form-item label="任务简介">
                      <el-input v-model="item.branchTitle" type="textarea" />
                    </el-form-item>
                    <el-form-item label="任务描述">
                      <el-input v-model="item.branchDetail" type="textarea" />
                    </el-form-item>
                    <el-form-item label="获取方式" />
                    <el-tabs type="border-card">
                      <el-tab-pane label="识别图">
                        <imageUpload @file="item.image=$event" />
                      </el-tab-pane>
                    </el-tabs>
                    <el-form-item label="奖励">
                      <el-input v-model="item.count" type="number" />
                    </el-form-item>
                    <el-form-item style="padding-top: 30px">
                      <el-button type="primary" @click="delTask(index)">删除</el-button>
                    </el-form-item>
                  </el-form>
                </el-card>
              </el-timeline-item>
            </el-timeline>

          </div>

          <div style="margin-bottom: 30px;padding-left: 30px">
            <el-button type="primary" @click="addSubtask">新增</el-button>
          </div>

        </div>

      </el-form-item>

    </el-form>
    <div style="margin-bottom: 30px;padding-left: 30px">
      <el-button type="success" @click="submit">保存</el-button>
    </div>

  </div>
</template>

<script>
import imageUpload from '@/components/imageUpload/index'
import { addSubTask, addMainTask } from '@/api/task'
export default {
  inject: ['reload'],
  components: {
    imageUpload
  },
  data() {
    return {
      maintask: {
        mainName: '', // 名称
        mainTitle: '', // 简介
        mainType: '', // 子任务顺序 0 顺序 1随机
        mainDetail: '', // 任务介绍
        mainModel: '1', // 任务模式 0 找碎片， 1 找拼图
        count: '', // 数量
        beginTime: '', // 开始时间
        endTime: ''// 结束时间
      },
      subtask: [
      ],
      addSubtaskData: {
        image: '', // 识别图
        count: '', // 奖励数量
        branchName: '', // 子任务名称
        branchTitle: '', // 简介
        branchDetail: ''// 详细介绍
      }
    }
  },
  methods: {
    async submit() {
      let subtask = JSON.parse(JSON.stringify(this.subtask))
      const maintask = JSON.parse(JSON.stringify(this.maintask))
      const that = this
      new Promise(function(resolve, reject) {
        addMainTask(maintask).then(res => {
          resolve(res.data.id)
        })
      }).then(res => {
        console.log({ res })
        const id = res
        subtask = subtask.map(item => {
          item.mainId = id
          return item
        })
        return new Promise(function(resolve, reject) {
          addSubTask(subtask).then(res => {
            resolve(res)
          })
        })
      }).then(res => {
        this.$message.success('添加成功')
        console.log(res)
        that.reload()
        // location.reload()
      })
      // //
      // console.log(maintask)
      // console.log(subtask)
    },

    addSubtask() {
      const subtask = JSON.parse(JSON.stringify(this.subtask))
      subtask.push(JSON.parse(JSON.stringify(this.addSubtaskData)))
      this.subtask = subtask
      console.log(subtask)
      this.$message.success('新增成功')
    },
    delTask(index) {
      const subtask = JSON.parse(JSON.stringify(this.subtask))
      console.log(subtask)
      subtask.splice(index, 1)
      this.subtask = subtask
      this.$message.success('删除成功')
    },
    onSubmit() {
      this.$message('submit!')
    },
    onCancel() {
      this.$message({
        message: 'cancel!',
        type: 'warning'
      })
    }
  }
}
</script>

<style scoped>
.line{
  text-align: center;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>

